import { FC, useState } from 'react';
import { Card, Tabs, Form, Input, Button, Table, message } from 'antd';
import { LockOutlined, MailOutlined } from '@ant-design/icons';
import MainLayout from '../../components/MainLayout';
import type { TabsProps } from 'antd';
import styles from './Profile.module.css';

const Profile: FC = () => {
  const [loading, setLoading] = useState(false);

  const handlePasswordChange = async (values: any) => {
    setLoading(true);
    try {
      // 模拟API调用
      await new Promise(resolve => setTimeout(resolve, 1000));
      message.success('密码修改成功');
    } catch (error) {
      message.error('修改失败');
    } finally {
      setLoading(false);
    }
  };

  const handleEmailChange = async (values: any) => {
    setLoading(true);
    try {
      // 模拟API调用
      await new Promise(resolve => setTimeout(resolve, 1000));
      message.success('邮箱修改成功');
    } catch (error) {
      message.error('修改失败');
    } finally {
      setLoading(false);
    }
  };

  const items: TabsProps['items'] = [
    {
      key: 'basic',
      label: '基本信息',
      children: (
        <div className={styles.formContainer}>
          <Form layout="vertical" onFinish={handleEmailChange}>
            <Form.Item
              name="email"
              label="邮箱"
              rules={[
                { required: true, message: '请输入邮箱' },
                { type: 'email', message: '请输入有效的邮箱地址' }
              ]}
            >
              <Input prefix={<MailOutlined />} placeholder="请输入新邮箱" />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" loading={loading}>
                修改邮箱
              </Button>
            </Form.Item>
          </Form>

          <Form layout="vertical" onFinish={handlePasswordChange}>
            <Form.Item
              name="oldPassword"
              label="原密码"
              rules={[{ required: true, message: '请输入原密码' }]}
            >
              <Input.Password prefix={<LockOutlined />} placeholder="请输入原密码" />
            </Form.Item>
            <Form.Item
              name="newPassword"
              label="新密码"
              rules={[{ required: true, message: '请输入新密码' }]}
            >
              <Input.Password prefix={<LockOutlined />} placeholder="请输入新密码" />
            </Form.Item>
            <Form.Item
              name="confirmPassword"
              label="确认密码"
              dependencies={['newPassword']}
              rules={[
                { required: true, message: '请确认新密码' },
                ({ getFieldValue }) => ({
                  validator(_, value) {
                    if (!value || getFieldValue('newPassword') === value) {
                      return Promise.resolve();
                    }
                    return Promise.reject(new Error('两次输入的密码不一致'));
                  },
                }),
              ]}
            >
              <Input.Password prefix={<LockOutlined />} placeholder="请确认新密码" />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" loading={loading}>
                修改密码
              </Button>
            </Form.Item>
          </Form>
        </div>
      ),
    },
    {
      key: 'logs',
      label: '操作记录',
      children: (
        <Table
          columns={[
            {
              title: '操作时间',
              dataIndex: 'time',
              key: 'time',
              sorter: (a, b) => new Date(a.time).getTime() - new Date(b.time).getTime(),
            },
            {
              title: '操作类型',
              dataIndex: 'type',
              key: 'type',
              filters: [
                { text: '上传文件', value: 'upload' },
                { text: '下载文件', value: 'download' },
                { text: '分析文件', value: 'analyze' },
                { text: '删除文件', value: 'delete' },
              ],
              onFilter: (value, record) => record.type === value,
            },
            {
              title: '操作内容',
              dataIndex: 'content',
              key: 'content',
            },
            {
              title: '操作结果',
              dataIndex: 'result',
              key: 'result',
            },
          ]}
          dataSource={[
            {
              key: '1',
              time: '2024-03-20 10:30:00',
              type: 'upload',
              content: '上传文件：专利分析报告.pdf',
              result: '成功',
            },
            // ... 更多数据
          ]}
        />
      ),
    },
  ];

  return (
    <MainLayout>
      <Card title="个人中心" className={styles.profileCard}>
        <Tabs items={items} />
      </Card>
    </MainLayout>
  );
};

export default Profile; 